<template>
	<view>
		<view class="header">
			<image :src="imgUrl" mode=""></image>
			<text>{{placename}}</text>
			<view class="venueType">
				<text class="">{{placetype}}</text>
			</view>
		</view>
		<view class="selectTime">
			<!-- <uni-section :title="'日期时间用法：' + datetimesingle" type="line"></uni-section> -->
			<view class="appointmentNews">
				<text>预约</text>
			</view>
			<view class="startTimeNews">
				<text>起始时间:</text>
			</view>
			<view class="startTime-body">
				<uni-datetime-picker type="datetime" v-model="startdatetime" :start="startdatetimesingle" :end="startdatetimesingleend" @change="startchange1"/>
			</view>
			<view class="endTimeNews">
				<text>结束时间:</text>
			</view>
			<view class="endTime-body">
				<uni-datetime-picker type="datetime" v-model="enddatetime" :start="enddatetimesingle" :end="enddatetimesingleend" @change="startchange2"/>
			</view>
		</view>
		<u-table class="" style="position: absolute;top:1000rpx;margin-bottom: 110rpx;margin:0 20rpx;width: 710rpx;">
				<u-tr>
					<u-th>已被预约起始时间</u-th>
					<u-th>已被预约结束时间</u-th>
				</u-tr>
				<u-tr v-for="(item,index) in timelist">
					<u-td>{{item.stime}}</u-td>
					<u-td>{{item.etime}}</u-td>
				</u-tr>
		</u-table>
		<view>
			<u-toast ref="uToast1" />
			<u-toast ref="uToast2" />
		</view>
		<view class="bottom">
			<view class="bottom-chongzhi" @click="chongzhi">
				重置
			</view>
			<view class="bottom-yuyue" @click="appointmentACK">
				预约
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				venue: [],
				imgUrl: "",
				placename: "",
				placetype: "",
				startdatetimesingle: "",
				startdatetimesingleend: "",
				enddatetimesingle: "",
				enddatetimesingleend: "",
				startdatetime:"",
				enddatetime:"",
				timelist:[
					{
						starttime:'2022-04-26 13:00:00',
						endtime:'2022-04-26 15:00:00'
					},
					{
						starttime:'2022-04-26 13:00:00',
						endtime:'2022-04-26 15:00:00'
					},
					{
						starttime:'2022-04-26 13:00:00',
						endtime:'2022-04-26 15:00:00'
					},
					{
						starttime:'2022-04-26 13:00:00',
						endtime:'2022-04-26 15:00:00'
					},
					{
						starttime:'2022-04-26 13:00:00',
						endtime:'2022-04-26 15:00:00'
					},
					{
						starttime:'2022-04-26 13:00:00',
						endtime:'2022-04-26 15:00:00'
					},
					{
						starttime:'2022-04-26 13:00:00',
						endtime:'2022-04-26 15:00:00'
					}
				]
			}
		},
		onLoad(options) {
			this.id = options.id;
			console.log(options)
			console.log(this.id)
			this.getVenueDetails();
			this.getzhanyong();
			this.startdatetimesingle = this.getTime();
			this.enddatetimesingle = this.getTime();
			this.startdatetime=this.startdatetimesingle;
			this.enddatetime=this.enddatetimesingle;
		},
		methods: {
			async getVenueDetails() {
				const res = await this.$myRequest({
					url: 'PlaceController/queryPlacebyid',
					data:{
						placeid:this.id
					}
				})
				console.log(res)
				this.venue = res.data;
				this.imgUrl = res.data.placepho;
				this.placename = res.data.placename;
				this.placetype = res.data.placetype;
				// console.log(this.venue);
			},
			async getzhanyong(){
				const res = await this.$myRequest({
					url:'PlaceappointmentController/querytimeperiod',
					data:{
						placeid:this.id,
						judge:2
					}
				})
				console.log(res)
				this.timelist=res.data;
			},
			getTime() {
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var hour = date.getHours();
				var second = date.getSeconds();
				var minute = date.getMinutes();
				if(minute+30<60){
					minute=minute+30;
				}
				else if(minute+30>=60 && hour<23){
					hour=hour+1;
					minute=(minute+30)%60;
				}
				else if(minute+30>=60 && hour==23){
					hour=(hour+1)%23;
					minute=(minute+30)%60;
					day=day+1;
				}
				var day1=this.panduanDay(month,year)
				var day2=this.panduanDay((month+1)%12,year)
				if(day+4<=day1){
					this.startdatetimesingleend=year + "-" + (month<10?('0'+month):(month)) + "-" + ((day+4)<10?('0'+(day+4)):day+4)+" "
												+(hour<10?('0'+hour):hour)+":"+(minute<10?('0'+minute):minute)+":"+(second<10?('0'+second):second);
					this.enddatetimesingleend=year + "-" + (month<10?('0'+month):(month)) + "-" + ((day+4)<10?('0'+(day+4)):day+4)+" "
												+(hour<10?('0'+hour):hour)+":"+(minute<10?('0'+minute):minute)+":"+(second<10?('0'+second):second);
					console.log(this.startdatetimesingleend);
				}
				else if(day+4>day1 && month+1<=12){
					this.startdatetimesingleend=year + "-" + ((month+1)<10?('0'+(month+1)):month) + "-" + ((day+4)%day2<10?('0'+((day+4)%day2)):(day+4)%day2)+" "
												+(hour<10?('0'+hour):hour)+":"+(minute<10?('0'+minute):minute)+":"+(second<10?('0'+second):second);
					this.enddatetimesingleend=year + "-" + ((month+1)<10?('0'+(month+1)):month) + "-" + ((day+4)%day2<10?('0'+((day+4)%day2)):(day+4)%day2)+" "
												+(hour<10?('0'+hour):hour)+":"+(minute<10?('0'+minute):minute)+":"+(second<10?('0'+second):second);
				}
				else{
					this.startdatetimesingleend=((year+1)<10?('0'+(year+1)):year+1) + "-" + ((month+1)%12<10?('0'+(month+1)%12):(month+1)%12) + "-" + 
												((day+4)%day2<10?('0'+((day+4)%day2)):(day+4)%day2)+" "
												+(hour<10?('0'+hour):hour)+":"+(minute<10?('0'+minute):minute)+":"+(second<10?('0'+second):second);
					this.enddatetimesingleend=((year+1)<10?('0'+(year+1)):year+1) + "-" + ((month+1)%12<10?('0'+(month+1)%12):(month+1)%12) + "-" + 
												((day+4)%day2<10?('0'+((day+4)%day2)):(day+4)%day2)+" "
												+(hour<10?('0'+hour):hour)+":"+(minute<10?('0'+minute):minute)+":"+(second<10?('0'+second):second);
				}
				console.log(this.startdatetimesingleend);
				return year + "-" + (month<10?('0'+month):(month)) + "-" + (day<10?('0'+day):day)+" "+(hour<10?('0'+hour):hour)+":"+(minute<10?('0'+minute):minute)+":"+(second<10?('0'+second):second);
			},
			panduanDay(month,year){
				var months=[0,31,28,31,30,31,30,31,31,30,31,30,31]
				if(year%400==0||(year%4==0&&year%100!=0)){
					month[2]=29;
				}
				return months[month];
			},
			showToast1() {
				this.$refs.uToast1.show({
					title: '预约成功!',
					type: 'success',
					url: '/pages/user/index'
				})
			},
			showToast2() {
				this.$refs.uToast2.show({
					title: '预约失败，时间发生冲突，请更换时间预约!',
					type: 'error',
					url: '/pages/user/index'
				})
			},
			async appointmentACK() {
				const res = await this.$myRequest({
					url: 'PlaceappointmentController/orderplace',
					data:{
						userid:getApp().globalData.userid,
						placeid:this.id,
						starttime:this.startdatetime,
						endtime:this.enddatetime
					}
				})
				console.log(res);
				if (res.data === 0) {
					// console.log(res.data);
					this.showToast2();
				} else {
					this.showToast1();
				}
				// console.log(this.startdatetimesingle + " " + this.enddatetimesingle);
				// console.log('/orderplace/?userid=202231060001' + "&placeid=" + this.id + "&starttime=" + this
				// 		.startdatetimesingle + "&endtime=" + this.enddatetimesingle)
			},
			startchange1(){
				setTimeout(()=>{
					console.log(this.startdatetime);
					this.enddatetime=this.startdatetime;
					this.enddatetimesingle=this.startdatetime;
				}, 100)
			},
			startchange2(){
				setTimeout(()=>{
					console.log(this.enddatetime);
					this.startdatetimesingleend=this.enddatetime;
				}, 100)
			},
			chongzhi(){
				setTimeout(()=>{
					this.startdatetimesingle = this.getTime();
					this.enddatetimesingle = this.getTime();
					this.startdatetime= this.startdatetimesingle;
					this.enddatetime= this.enddatetimesingle;
				}, 100)
			}
		}
	}
</script>

<style lang="scss">
	.header {
		width: 750rpx;
		height: 450rpx;

		image {
			width: 750rpx;
			height: 450rpx;
		}

		text {
			margin: 15rpx;
			font-size: 30rpx;
		}

		.venueType {
			display: inline-block;
			float: right;
			width: 85rpx;
			height: 40rpx;
			margin-right: 15rpx;
			background-color: $u-type-warning-disabled;

			text {
				font-size: 28rpx;
				color: #fff;
			}
		}
	}

	.selectTime {
		position: relative;
		top: 130rpx;

		.appointmentNews {
			position: absolute;
			color: $u-type-primary;
			width: 80rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			border-radius: 10rpx;
			border: 1px solid $u-type-primary;
			left: 20rpx;
		}

		.startTimeNews {
			position: absolute;
			left: 60rpx;
			top: 110rpx;
		}

		.endTimeNews {
			position: absolute;
			left: 60rpx;
			top: 260rpx;
		}

		.startTime-body {
			position: absolute;
			top: 90rpx;
			right: 60rpx;
		}

		.endTime-body {
			position: absolute;
			top: 240rpx;
			right: 60rpx;
		}
	}

	.tixing {
		position: absolute;
		top: 700rpx;
		left: 200rpx;
		width: 340rpx;
		height: 200rpx;
		padding: 70rpx 10rpx 0;
		text-align: center;
		background-color: #fff;
		border: 2px solid #eee;

		.tixingwenzi1 {
			color: red;
		}

		.tixingwenzi2 {
			color: $u-type-success;
		}

		z-index:3;

		.tubiao {
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			color: rgb(186, 185, 189);
		}
	}

	.mark {
		position: absolute;
		width: 750rpx;
		height: 792rpx;
		background: rgba(186, 185, 189, 0.2);
		z-index: 2;
	}

	.bottom {
		position: fixed;
		bottom: 0rpx;
		width: 750rpx;
		height: 100rpx;
		border-radius: 20rpx;
		text-align: center;

		.bottom-chongzhi {
			float: left;
			width: 300rpx;
			color: #7a7e83;
			background-color: #f4f4f4;
			font-size: 35rpx;
			line-height: 100rpx;
		}
		.bottom-yuyue{
			float: right;
			width: 450rpx;
			color: #fff;
			background-color: #62cb8c;
			font-size: 35rpx;
			line-height: 100rpx;
		}
	}
</style>
